<!--  -->
<template>
  <el-dialog :visible.sync="dialogShow" :title="pageType == 'ad' ? '广告位' : '停车场'" width="1120px" :close-on-click-modal="false">
    <div slot="title">
      <span v-if="pageType == 'parking'" class="color-333333 font-size-24 font-weight-700">{{ model.parkName }}</span>
      <template v-else>
        <span class="color-333333 font-size-24 font-weight-700">{{ model.name || model.parkName || model.locationDesc }}</span>
        <span class="color-333333 font-size-18 font-weight-700" v-if="model.parkType"> {{ (model.parkType == 1 ? '地下' : '地面') + '停车场' }}</span>
      </template>
    </div>
    <div class="flex" v-if="model">
      <div class="btn-box">
        <div v-for="item in tabList" class="tab-btn margin-bottom-20" @click="tabChange(item)" :key="item.type" :class="item.type == activeTab ? 'active-tab' : ''">{{ item.name }}</div>
        <el-button v-if="model.isRent == 1" type="primary" size="mini" class="margin-bottom-20" @click="goToInfo">签约</el-button>
      </div>

      <div class="flex-1 padding-left-right-30">
        <div class="content-box">
          <room-dialog-bill v-if="activeTab == 'bill'" ref="bill" :model="model"></room-dialog-bill>
          <room-dialog-client v-if="activeTab == 'client'" ref="client" :model="model" :pageType="pageType"></room-dialog-client>
          <room-dialog-history v-if="activeTab == 'history'" ref="history" :model="model" :pageType="pageType"></room-dialog-history>
          <template v-if="activeTab == 'asset'">
            <div v-if="pageType == 'ad'" class="flex-box margin-top-10">
              <div class="flex-1 padding-left-right-25">
                <div class="flex-box margin-bottom-40">
                  <span class="font-weight-600">广告位类型：</span>
                  <span>{{ adTypeList[model.adType] }}</span>
                </div>
                <div class="flex-box margin-bottom-40">
                  <span class="font-weight-600">位置类型：</span>
                  <span>{{ model.locationFloor == 1 ? '室外' : '室内' }}</span>
                </div>
                <div class="flex-box margin-bottom-40">
                  <span class="font-weight-600">当前租金：</span>
                  <span>{{ model.currentRentPrice || 0 | fmoneyThousand }} {{ model.rentGuideUnit }}</span>
                </div>
              </div>
              <div class="split-line"></div>
              <div class="flex-1 padding-left-right-15">
                <div class="flex-box margin-bottom-40">
                  <span class="font-weight-600">广告位尺寸：</span>
                  <span>{{ model.adSize }}</span>
                </div>
                <div class="flex-box margin-bottom-40">
                  <span class="font-weight-600">位置描述：</span>
                  <span>{{ model.locationCode }}</span>
                </div>
                <div class="flex-box margin-bottom-40">
                  <span class="font-weight-600">租金指导价：</span>
                  <span>{{ model.rentGuidePrice || 0 | fmoneyThousand }} {{ model.rentGuideUnit }}</span>
                </div>
              </div>
            </div>

            <div v-if="pageType == 'parking'" class="flex-box margin-top-10">
              <div class="flex-1 padding-left-right-25">
                <!-- <div class="flex-box margin-bottom-40">
                <span class="font-weight-600">功能分区：</span>
                <span>{{ model.partitionName }}</span>
              </div> -->
                <div class="flex-box margin-bottom-40">
                  <span class="font-weight-600">建筑面积：</span>
                  <span>{{ model.buidArea }}m²</span>
                </div>
                <div class="flex-box margin-bottom-40">
                  <span class="font-weight-600">当前租金：</span>
                  <span>{{ model.currentRentPrice || 0 | fmoneyThousand }} {{ model.rentGuideUnit }}</span>
                </div>
              </div>
              <div class="split-line"></div>
              <div class="flex-1 padding-left-right-15">
                <!-- <div class="flex-box margin-bottom-40">
                <span class="font-weight-600">所在楼层：</span>
                <span>{{ model.locationFloorName }}</span>
              </div> -->
                <div class="flex-box margin-bottom-40">
                  <span class="font-weight-600">总车位数：</span>
                  <span>{{ model.parkNum }}</span>
                </div>
                <div class="flex-box margin-bottom-40">
                  <span class="font-weight-600">租金指导价：</span>
                  <span>{{ model.rentGuidePrice || 0 | fmoneyThousand }} {{ model.rentGuideUnit }}</span>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
  import roomDialogBill from '@/common/components/assetDialog/roomDialogBill.vue';
  import roomDialogClient from '@/common/components/assetDialog/roomDialogClient.vue';
  import roomDialogHistory from '@/common/components/assetDialog/roomDialogHistory.vue';

  export default {
    data() {
      return {
        bizTypes: {
          rent: '租金',
          manage: '管理费',
          3: '能源费',
        },
        statusNmae: {
          2: '已出账',
          0: '待出账',
          4: '已付款',
        },
        activeTab: 'asset',
        tabList: [
          { type: 'asset', name: '资产信息' },
          { type: 'bill', name: '合同账单' },
          { type: 'client', name: '客户信息' },
          { type: 'history', name: '历史合同' },
        ],
        dialogShow: false,
        adTypeList: ['发光标识', '亚克力板', '广告布', '立地灯箱', '外立面广告位', '覆壁灯箱', '灯箱', '电梯轿厢广告', '门头logo'],
      };
    },

    props: {
      model: {
        type: Object,
        default: null,
      },
      pageType: {
        type: String,
        default: '',
      },
    },

    watch: {
      pageType: {
        deep: true,
        handler(val) {
          this.setTabTxt();
        },
      },
    },

    methods: {
      goToInfo() {
        let url = '/businessAssets/ContractManage/draft?menuId=909ad6831acb46a9aebb0675ba6943fc&parentMenuId=7ee2400d0e72437aa3bdb5823497537f&timestamp=1650942154852&tabId=a0a8ab12f6f945d8b1f77a30b83d21ea&TAB=2';
        window.open(url);
      },
      //tab切换
      tabChange(item) {
        this.activeTab = item.type;
      },
      setTabTxt() {
        if (this.pageType == 'ad') {
          this.tabList[0].name = '广告信息';
          this.tabList[3].name = '全部合同';
        } else if (this.pageType == 'parking') {
          this.tabList[0].name = '停车场信息';
          this.tabList[2].name = '被委托方';
          this.tabList[3].name = '全部合同';
        }
      },
    },

    mounted() {
      this.setTabTxt();
    },

    components: { roomDialogBill, roomDialogClient, roomDialogHistory },
  };
</script>
<style scoped lang="scss">
  .split-line {
    width: 1px;
    height: 100px;
    background: #f1f1f1;
    margin: 0 80px;
  }
  .flex-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 14px;
    }
  }
  .content-box {
    max-height: 525px;
    overflow-y: auto;
  }
  .content-box::-webkit-scrollbar {
    display: none;
  }
  .btn-box {
    width: 106px;
  }
  .tab-btn {
    text-align: center;
    height: 38px;
    line-height: 38px;
    border-radius: 3px;
    cursor: pointer;
  }
  .active-tab {
    background: rgba($color: #3384fe, $alpha: 0.05);
    color: #3384fe;
  }
  ::v-deep .el-button--primary {
    height: 38px;
    line-height: 38px;
    padding: 0;
    width: 106px;
    border-radius: 3px;
    margin-left: 0;
    background: #3384fe;
  }
  ::v-deep .el-dialog .el-dialog__header {
    background: #ffffff;
    border-bottom: 1px solid #f1f1f1;
  }
  ::v-deep .el-dialog .el-dialog__header .el-dialog__close {
    color: #333;
  }
</style>
